<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title id="titleName">#{lang.TiaoZhaJiLu}</title>
		<link rel="stylesheet" href="/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link href='/resources/bootstrap/css/bootstrap-datetimepicker.min.css' rel='stylesheet' />
		<style>
.bs-callout {
	padding: 20px;
	padding-left: 40px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	border-radius: 3px;
}

.bs-callout-danger {
	border-left-color: #ce4844;
}

.redNum {
	color: red;
	font-size: 22px;
	margin: 5px;
}

/* .hasSelected {
	color: red;
}

.hasSelected:focus {
	color: red;
}
 */
label {
	margin-left: 10px;
	margin-right: 10px;
	font-weight: normal;
}

input[type="checkbox"] {
	margin-left: 5px;
	margin-right: 5px;
}

.deleteRow {
	vertical-align: middle;
	text-align: center;
}
</style>
	</ui:define>
	<ui:define name="content">
		<div id="contentDiv" class="row" style="padding-left: 20px; padding-right: 20px;">
			<div id="tableDiv" class="nav-tabs-custom">
				<ul id="selectUL" class="nav nav-tabs pull-right ui-sortable-handle">
					<li class="pull-left header" style="width: 1000px;">
						<div class="navbar-form">
							<button id="columnsSelectButton" style="margin: 10px;" class="btn btn-default "
								onclick="onColumnsSelectDivClick();">
								#{lang.LieShaiXuan} <span id="columnsSelectButtonIcon" class="fa fa-caret-down"></span>
							</button>
							<div class="input-group">
								<div class="btn btn-default">
									<i class="fa fa-calendar"></i>
								</div>
								<div class="form-group">
									<input type="text" class="form-control" id="start" /> <input class="form-control"
										type="text" id="end" />
								</div>
								<button class="btn btn-default" onclick="query()">#{lang.ChaXun}</button>
							</div>
							<button id="selectButton" style="margin: 10px;" class="btn btn-default"
								onclick="onSelectDivClick();">
								#{lang.ShuJuShaiXuan}<span id="selectButtonIcon" class="fa fa-caret-down"></span>
							</button>

						</div>
					</li>
				</ul>
				<div class="panel-collapse collapse" id="columnsSelectDiv" style="position: relative;">
					<table class="table" style="margin: 0;">
						<tbody>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.LieShaiXuan}</td>
								<td class="col-sm-1"><label><input id="columnsAll" checked="checked"
										type="checkBox" onchange="selectAllColumns(this.checked,'columns');" />#{lang.QuanXuan}</label></td>
								<td id="columns"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="panel-collapse collapse" id="selectDiv" style="position: relative;">
					<table class="table" style="margin: 0;">
						<tbody>
							<tr>
								<td class="col-sm-1" style="font-weight: bold;">#{lang.DianYaDengJi}</td>
								<td class="col-sm-1"><label><input id="voltagesAll" checked="checked"
										type="checkBox" onchange="selectAll(this.checked,'voltages');" />#{lang.QuanXuan} </label></td>
								<td id="voltages">
									<label><input
										name="voltages" type="checkbox" onchange="doFilter();" checked="checked" value="800" />800kV</label>
									<label><input name="voltages" type="checkbox"
										checked="checked" onchange="doFilter();" value="500" />500kV </label> 
									<label><input
										name="voltages" type="checkbox" onchange="doFilter();" checked="checked" value="220" />220kV</label></td>
							</tr>
							<tr>
								<td style="font-weight: bold;">#{lang.GuZhangSheBei}</td>
								<td class="col-sm-1"><label><input id="equipmentsAll" checked="checked"
										type="checkBox" onchange="selectAll(this.checked,'equipments');" />#{lang.QuanXuan}</label></td>
								<td id="equipments"></td>

							</tr>
						</tbody>
					</table>
				</div>
				<div class="tab-content" style="padding: 0;">
					<div class="chart" style="position: relative;">
						<table id="faultTable" class="table table-gray">
						</table>
					</div>
				</div>
			</div>
		</div>
		<h:inputHidden id="startTime" value="#{request.getParameter('startTime')}"></h:inputHidden>
		<h:inputHidden id="endTime" value="#{request.getParameter('endTime')}"></h:inputHidden>
		<h:inputHidden id="stationId" value="#{request.getParameter('stationId')}"></h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="/resources/plugins/echarts/echarts.min.v3.7.2.js"></script>
		<script src="/resources/js/tables/mytable.js"></script>
		<script src="/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script>
			LocaleTitle = {
				colcums : {
					XuHao : '#{lang.XuHao}',
					DiaoGuanFanWei : '#{lang.DiaoGuanFanWei}',
					GuZhangShiJian : '#{lang.GuZhangShiJian}',
					Dianya : '#{lang.DianYa}',
					GuZhangSheBei : '#{lang.GuZhangSheBei}',
					GuZhangLeiXing : '#{lang.GuZhangLeiXing}',
					GuZhangYuanYin : '#{lang.GuZhangYuanYin}',
					GuZhangXiangBie : '#{lang.GuZhangXiangBie}',
					GuZhangGuoCheng : '#{lang.GuZhangGuoCheng}',
					XingBoCeJu : '#{lang.XingBoCeJu}',
					BeiZhu : '#{lang.BeiZhu}',
					XiangXi : '#{lang.XiangXi}',
					SheZhiWeiFeiGuZhang : '#{lang.SheZhiWeiFeiGuZhang}',
					GuZhang : '#{lang.GuZhang}',
					Ci : '#{lang.Ci}'
				}
			}
		</script>
		<script type="text/javascript" src="dailyFault.js"></script>
		<script>
		 var ulHeight = document.getElementById("selectUL").offsetHeight; 
		 var tableHeight = wrapperHeight -30- ulHeight;
		 var scrollYHeight  = tableHeight-100;
		 $('#contentDiv').css('height',wrapperHeight);
			$(function() {
				init();
			});
			function onSelectDivClick() {
				var div = $('#selectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#selectButtonIcon').removeClass("fa fa-caret-up");
					$('#selectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#selectButtonIcon').removeClass("fa fa-caret-down");
					$('#selectButtonIcon').addClass("fa fa-caret-up");
				}
			}
			function onColumnsSelectDivClick() {
				var div = $('#columnsSelectDiv');
				if (div.hasClass('in')) {
					div.collapse('hide');
					$('#columnsSelectButtonIcon').removeClass("fa fa-caret-up");
					$('#columnsSelectButtonIcon').addClass("fa fa-caret-down");
				} else {
					div.collapse('show');
					$('#columnsSelectButtonIcon').removeClass("fa fa-caret-down");
					$('#columnsSelectButtonIcon').addClass("fa fa-caret-up");
				}
			}
		</script>
	</ui:define>
</ui:composition>



